<template>
  <g :transform="_transform"></g>
</template>

<script>
/* eslint-disable */
import * as d3 from 'd3';
import Debug from 'debug';
const dbg = Debug('VueAxis');
dbg.enabled = true;
export default {
    props: {
        orient: {
            type: String,
            required: true
        },
        scaleGenerator: {
            type: Function
            // default: null
        },
        scaleType: {
            type: String
        },
        x: {
            type: Number
        },
        y: {
            type: Number
        }
    },
    computed: {
        _transform: function() {
            var x = this.x;
            var y = this.y;
            return 'translate(' + x + ',' + y + ')';
        },
        _orient: function() {
            return 'axis' + this.orient;
        },
        $_el() {
            return this.$el;
        }
    },
    mounted: function() {
        let new_scale = this.scaleGenerator();
        dbg('%s', 'mounted', new_scale);
        if (new_scale) {
            let selection = d3.select(this.$_el);
            let becalled = d3[this._orient](new_scale);
            // console.log("vue-axis mounted",{ selection, becalled });
            // debugger;
            selection.call(becalled);
        }
    },
    watch: {}
};
</script>

<style>

</style>
